<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件一 组件通信  props 复杂对象</title>
</head>
<body>
<div id="app">
     <my-list :items="lessions"/>
    <!--
        vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名） 上边的可以使用
       下边会报错
    -->
    <!--<myList :items="lessions"/>-->
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    const myList = {
        template: '\
        <ul>\
        	<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
        </ul>\
        ',
        props: {
            items: {   //组件设置的属性
                type: Array,
                default: [],
                required: true
            }
        }
    };

    /*
    props：定义需要从父组件中接收的属性
        items：是要接收的属性名称
             - type：限定父组件传递来的必须是数组
             - default：默认值
             - required：是否必须
    * */

    var app =new Vue({
        el:"#app",
        components:{
            myList // 当key和value一样时，可以只写一个     每个 components 对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现
        },
        data:{
            lessions:[
                {id:1, name: 'java'},
                {id:2, name: 'php'},
                {id:3, name: 'ios'},
            ]
        }


    });
</script>
</html>